<template>
	<view class="supporting_records">
		<block v-if="dataList.length!=0">
			<view class="sr_item" v-for="(item,index) in dataList" :key="index" >

				<view class="sr_item_box">
					<view class="sr_item_left"><text>支</text><text>持</text><text>对</text><text>象</text></view>
					<view class="sr_item_right">{{item.teamName}}</view>
				</view>
				<view class="sr_item_box">
					<view class="sr_item_left"><text>支</text><text>持</text><text>时</text><text>间</text></view>
					<view class="sr_item_right">{{item.betTime}}</view>
				</view>
				<view class="sr_item_box">
					<view class="sr_item_left"><text>支</text><text>持</text><text>金</text><text>额</text></view>
					<!-- <view class="sr_item_right">1000 CoCo</view> -->
					<view class="sr_item_right">{{item.betAmount}} CoCo</view>
				</view>
				<view class="sr_item_box">
					<view class="sr_item_left" ><text>回</text><text>报</text><text>率</text> </view>
					<view class="sr_item_right">{{item.betOdds}}</view>
				</view>
				<view class="sr_item_box">
					<view class="sr_item_left"><text>支</text><text>持</text><text>结</text><text>果</text></view>
					<view class="sr_item_right">{{item.statusStr}}</view>
				</view>
				<view class="sr_item_box" v-if="item.issueAmount != ''">
					<view class="sr_item_left"><text>预</text><text>计</text><text>奖</text><text>励</text></view>
					<!-- <view class="sr_item_right">1230CoCo</view> -->
					<view class="sr_item_right">{{item.issueAmount}} CoCo</view>
				</view>
			</view>
		</block>
		<view class="no_info" v-else>
			<image src="/static/my/news_no.png" mode="widthFix"></image>
			<text>暂无记录</text>
		</view>
	</view>
</template>

<script>
	import {getChampionRecordList} from '@/api/api-v1-2.js'
	export default {
		data() {
			return {
				dataList: [],
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				id:null
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getDataList()
		},
		methods: {
			async getDataList() {
				uni.showLoading({ title:'加载中' })
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					guessActivityId:this.id
				}
				try{
					const res = await getChampionRecordList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					var el = res.result.records			
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(el); //将数据拼接在一起
					} else {
						this.dataList = el
					}
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
			
				}
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				// this.moreShop = 'noMore'
			} else {
				// this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getDataList()
			}
		}
	}
</script>

<style scoped>
	page{
		background: #FCFCFD;
	}
	.supporting_records{
		padding: 30rpx 0;
	}
	.sr_item{
		width: 690rpx;
		padding: 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 16px #EAEAEA;
		border-radius: 32rpx;
		margin:0 auto;
		margin-bottom: 30rpx;
	}
	.sr_item_box{
		font-size: 30rpx;
		margin-bottom: 18rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.sr_item_box:last-child{
		margin-bottom: unset;
	}
	.sr_item_left{
		width: 122rpx;
		color: #555555;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.sr_item_right{
		color: #222222;
	}
</style>
